<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-07-14 15:29:13
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-08-08 17:41:11
 * @FilePath: \passiflora-edulis-sims\src\components\GlobalTextComponent.vue
 * @Description: 全局文字设置组件
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
-->
<script setup lang="ts">
import { useGlobalTextStore } from 'src/stores/global-text-store'
import { useGlobalOptionStore } from 'src/stores/global-option-store'
import { loadFont } from 'src/utils/FontUtil'
const text_aligns = ['left', 'center', 'right', 'justify', 'both']
const vertical_align = ['top', 'middle', 'bottom']
const global_text = useGlobalTextStore()

const global_optin_store = useGlobalOptionStore()
global_text.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'

  void loadFont(
    state.font.font_name,
    global_optin_store.get_fontPath(state.font.font_name),
    {
      family: state.font.font_name,
      weight: '400',
      display: 'swap',
    }
  )
})
</script>
<template>
  <div>
    <div>
      <h5>字体设置</h5>
    </div>
    <div class="row">
      <div class="col-12 q-pb-sm q-pr-sm"></div>
      <div class="col-4 q-pb-sm q-pr-sm">
        <q-select
          outlined
          v-model="global_text.font.font_name"
          :options="global_optin_store.font_names"
          label="字体"
        >
        </q-select>
      </div>
      <div class="col-4 q-pb-sm q-pr-sm">
        <q-input
          outlined
          type="number"
          v-model="global_text.font.font_size"
          label="字号"
        >
        </q-input>
      </div>
      <div class="col-4 q-pb-sm q-pr-sm">
        <q-input
          outlined
          v-model="global_text.font.font_color"
          label="绘制字体颜色"
          :input-style="{ color: global_text.font.font_color }"
          ><template v-slot:append>
            <q-icon name="colorize" class="cursor-pointer">
              <q-popup-proxy
                cover
                transition-show="scale"
                transition-hide="scale"
              >
                <q-color v-model="global_text.font.font_color" />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
      <div class="col-6 q-pb-sm q-pr-sm">
        <q-select
          outlined
          v-model="global_text.text_align"
          :options="text_aligns"
          label="字体水平方向"
        >
        </q-select>
      </div>
      <div class="col-6 q-pb-sm q-pr-sm">
        <q-select
          outlined
          v-model="global_text.vertical_align"
          :options="vertical_align"
          label="字体垂直方向"
        >
        </q-select>
      </div>
    </div>
  </div>
</template>
<style lang="sass" scoped></style>
